<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" [innerText]="service.customName || service.serviceName"></h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="dismissModal()"
    ></button>
  </div>
  <div class="modal-body text-center px-5">
    <h6 class="mb-4">{{ 'accessories.control.filter_level' | translate }}: {{ service.values.FilterLifeLevel }}%</h6>
    <nouislider [min]="0" [max]="100" [step]="1" [disabled]="true" [(ngModel)]="service.values.FilterLifeLevel" />
    <div
      class="btn-group-vertical d-flex justify-content-center mt-5 mb-0 p-0"
      role="group"
      [attr.aria-label]="'accessories.core.filter_maintenance' | translate"
    >
      <button type="button" class="btn mb-0 mx-0 p-3 btn-control" (click)="resetFilterLife($event)">
        {{ 'form.button_reset' | translate }}
      </button>
    </div>
  </div>
  <div class="modal-footer"></div>
</div>
